<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div id="app">
            <!-- 第一种方法 -->
            <!-- <a href="" @click.parent="flag-ture">登陆</a>
            <a href="" @click.parent="flag-false">注册</a>
            <login v-if='flag'></login>
            <register v-else='flag'></register> -->
            <!-- 第二种切换方法 -->
            <a href="" @click.parent="conName='login'">登陆</a>
            <a href="" @click.parent="conName='register'">注册</a>
            <!-- 占位符componentId :is属性，可以用来指定需要展示的组建名称 -->
            <component :is="'conName'"></component>
        </div>

    

        <script src="./lib/vue-2.4.0.js"></script>
        <script>
            Vue.component('login',{
                template:"<h3>登陆组件</h3>"
            })

            Vue.component('register',{
                template:'<h3>注册组件</h3>'
            })


            var vm = new Vue({
                el: '#app',
                data: {
                    // flag:false
                    conName:''//当前component中的is绑定组件的名称
                },
                methods: {
                    
                },
            })
        </script>
    </body>
</html>